<template>
  <div id="singerDetails" class="page">
      <nav style="margin:20px 0px 20px 0px;">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>歌手</el-breadcrumb-item>
          <el-breadcrumb-item>{{current.name}}</el-breadcrumb-item>
        </el-breadcrumb>
      </nav>
      <div id="description">
          <div class="content">
            <div class="content" style="border:2px solid gainsboro;">
              <div style="width:200px;height:200px; border:1px solid gainsboro;">
                <img :src="current.image" :title="current.name" width="100%;" style="border-radius: 0px;">
              </div>
              <div id="text">
                <p style="font-size:25px;">{{current.name}}</p>
                <p id="text-t">
                  <el-scrollbar>
                    {{current.description}}
                  </el-scrollbar>
                </p>
                <el-tooltip class="item" effect="dark" :content="current.introduction" placement="bottom">
                  <span><i class="el-icon-s-comment"></i>详细介绍</span>
                </el-tooltip>
              </div>
            </div>
            <div style="margin-left:20px;" id="similar">
                <p>相似歌手</p>
                <div class="content" style="margin:20px 0px 10px 0px;">
                    <div v-for="(item,index) in current.similar" :key="index" v-if="index < 2"
                         style="margin-right:5px;text-align: center;">
                      <a href="/singerDetails" @click="toDetails(item)">
                        <div style="width:100px;height:100px;">
                          <img :src="item.img1v1Url" :title="item.name" width="100%;">
                        </div>
                        <span>{{item.name}}</span>
                      </a>
                    </div>
                </div>
                <p style="height:10px;margin-top:20px;"></p>
            </div>
          </div>

          <div style="margin-top:20px;">
            <el-table ref="multipleTable" :data="topList" tooltip-effect="dark" style="width: 100%">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column label="歌曲名称" width="850">
                <template slot-scope="scope">
                  {{scope.row.name}} -
                  <span v-for="(item,index) in scope.row.ar" :key="index">
                    {{item.name}}
                    <span v-if="index < scope.row.ar.length - 1">、</span>
                  </span>
                </template>
              </el-table-column>
              <el-table-column width="90">
                  <template slot-scope="scope">
                    <a href="javascript:void(0)" @click="addPlay(scope.row)"><i class="el-icon-headset"></i></a>
                  </template>
              </el-table-column>
            </el-table>
          </div>
      </div>
  </div>
</template>

<script>
import StorageUtil from "../../utils/StorageUtil";
import functions from "../../utils/functions";

export default {
  name: "singerDetails",
  data(){
    return{
      current:{
          id:0,
          name:'',
          description:'',
          similar:[],
          introduction:'',
          image:'',
      },
      topList:[],
    }
  },
  methods:{
      getSingerDescripton(){
          this.$get("https://autumnfish.cn/artist/desc?id=" + this.current.id).then(result => {
              this.current.description = result.briefDesc;
              result.introduction.forEach(item => {
                  this.current.introduction += item.txt;
              });
          });
      },
      getSimilar(){
          this.$get("https://autumnfish.cn/simi/artist?limit=2&id=" + this.current.id).then(result => {
              this.current.similar = result.artists;
              console.log(this.current.similar);
          })
      },
      getTopList(){
          this.$get("https://autumnfish.cn/artist/top/song?id=" + this.current.id).then(result => {
              this.topList = result.songs;
          });
      },
      addPlay(item){
        let name = "";
        item.ar.forEach(auther => { name += auther.name; });
        let data = {
          singName:item.name,
          singerName:name,
          singId:item.id,
        }
        functions.savePlayList(data);
        this.$notify({ title: '成功', message: '已加入到播放列表', type: 'success' });
      },
      toDetails(item){
        let singer = {
          id:item.id,
          name:item.name,
          image:item.img1v1Url
        }
        StorageUtil.session.setItem("singer",singer);
      },
  },
  created() {
      let singer = JSON.parse(StorageUtil.session.getItem("singer"));
      this.current.id = singer.id;
      this.current.name = singer.name;
      this.current.image = singer.image;
      this.getSingerDescripton();
      this.getSimilar();
      this.getTopList();
  }
}
</script>

<style>
  #text{
    width: 550px;
    height:200px;
    font-size:13px;
    margin-left:10px;
  }
  #text-t{
    width:100%;
    height:140px;
  }
  #text .item{
      float:right;
      font-size:14px;
      margin-right:10px;
  }
  #similar>p{
      background:gainsboro;
  }
  #similar p:nth-child(1){
    height:30px;
    text-align: center;
    line-height:30px;
    color:white;
  }
  .el-scrollbar {
    height: 100%;
  }
  .el-scrollbar__wrap {
    width: 103%;
    height: 100%;
    overflow-x: hidden;
  }
</style>
